<template>
    <el-card shadow="none">
        <el-row :gutter="40">
            <el-col :lg="10" :md="10" :sm="24" :xl="10" :xs="24" style="padding: 40px">
                <div style="padding: 30px; margin: 20px 0; font-size: 14px">
                    <div style="font-size: 28px; font-weight: bold; margin-bottom: 20px">物联网平台</div>
                </div>
                <div style="padding: 30px; font-size: 14px">
                    <div style="float: left">
                        <div style="font-size: 14px; font-weight: bold; margin: 16px 0; color: #f56c6c">右侧是移动端H5版本演示</div>
                        <div style="display: table; margin-bottom: 10px">
                            <div style="display: table-cell"></div>
                        </div>
                        <div style="display: table; margin-bottom: 10px">
                            <div style="width: 70px; font-weight: bold; display: table-cell">联系公司</div>
                            <div style="display: table-cell">
                                <span>上海能智能科技有限公司</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24" style="padding: 40px">
                <div class="phone">
                    <iframe id="iframe" :src="h5Url" class="phone-container" frameborder="0" height="100%" scrolling="auto" width="100%"></iframe>
                </div>
            </el-col>
        </el-row>
    </el-card>
</template>
<script>
export default {
    data() {
        return {
            h5Url: window.location.origin + '/h5/',
        };
    },
};
</script>
<style lang="scss" scoped>
.phone {
    height: 729px;
    width: 370px;
    background-image: url('../../assets/images/phone.png');
    background-size: cover;
    margin: 0 auto;
}

.phone-container {
    height: 618px;
    width: 343px;
    position: relative;
    top: 46px;
    left: 12px;
    background-color: #fff;
}

.content {
    line-height: 24px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 10px;
}

.description {
    font-size: 12px;

    tr {
        line-height: 20px;
    }
}

.panel-group {
    .card-panel-col {
        margin-bottom: 10px;
    }

    .card-panel {
        height: 68px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        color: #666;
        border: 1px solid #eee;
        border-radius: 5px;
        //box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
        background-color: #fff;

        &:hover {
            .card-panel-icon-wrapper {
                color: #fff;
            }

            .icon-blue {
                background: #36a3f7;
            }

            .icon-green {
                background: #34bfa3;
            }

            .icon-red {
                background: #f56c6c;
            }

            .icon-orange {
                background: #e6a23c;
            }
        }

        .icon-blue {
            color: #36a3f7;
        }

        .icon-green {
            color: #34bfa3;
        }

        .icon-red {
            color: #f56c6c;
        }

        .icon-orange {
            color: #e6a23c;
        }

        .card-panel-icon-wrapper {
            float: left;
            margin: 10px;
            padding: 10px;
            transition: all 0.38s ease-out;
            border-radius: 6px;
        }

        .card-panel-icon {
            float: left;
            font-size: 30px;
        }

        .card-panel-description {
            float: right;
            font-weight: bold;
            margin: 15px;
            margin-left: 0px;

            .card-panel-text {
                line-height: 14px;
                color: rgba(0, 0, 0, 0.45);
                font-size: 14px;
                margin-bottom: 12px;
                text-align: right;
            }

            .card-panel-num {
                font-size: 18px;
            }
        }
    }
}
</style>
